<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">收件人</view>
				<view class="ipt">
					<input type="text" v-model="name" placeholder="请输入收件人姓名"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">电话号码</view>
				<view class="ipt">
					<input type="text" v-model="phoneNumber" placeholder="请输入收件人电话号码"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">所在地区</view>
				<view class="ipt" @tap="openAddress">{{pageAddress}}</view>
			</view>
			<view class="row">
				<view class="nominal">详细地址</view>
				<view class="ipt">
					<input type="text" v-model="detailAddress" placeholder="请输入详细地址"/>
				</view>
			</view>
			<view class="row">
				<view class="nominal">设置默认地址</view>
				<view class="ipt switch">
					<switch @change="isDefaultAddress" color="#354E44" />
				</view>
			</view>
		</view>
		
		<view class="save">
			<view class="btn" @tap="saveAddress">保存地址</view>
		</view>
		
		<!-- 地址组件 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
		
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import { addAddressInfo } from "../../../../api/home/address/newaddress/newaddress.js"
	export default {
		data() {
			return {
				// 页面展示地址
				pageAddress:'请点击选择地址',
				// 组件默认展示地址
				cityPickerValueDefault:[7,0,0],
				// 各种参数
				city:'',
				cityCode:'',
				defaultStatus:0,
				detailAddress:'',
				name:'',
				phoneNumber:'',
				postCode:'',//传空值
				province:'',
				region:'',
				tag:'' //传空值
			};
		},
		components: {
		     simpleAddress
		},
		methods:{
			// switch事件是否为默认地址
			isDefaultAddress(e){
				// console.log(e.target.value);
				this.defaultStatus = e.target.value == true ? 1 : 0;
				// console.log(this.defaultStatus);
			},
			// 点击选择地址
			openAddress(){
				this.$refs.simpleAddress.open()
			},
			// 地址组件事件
			onConfirm(e){
				console.log(e);
				this.city = e.labelArr[1];
				this.cityCode = e.provinceCode + e.cityCode + e.areaCode;
				this.province = e.labelArr[0];
				this.region = e.labelArr[2];
				// 展示地址
				this.pageAddress = e.label;
			},
			// 保存地址
			saveAddress(){
				var obj = {
					city:this.city,
					cityCode:this.cityCode,
					defaultStatus:this.defaultStatus,
					detailAddress:this.detailAddress,
					name:this.name,
					phoneNumber:this.phoneNumber,
					postCode:'',//传空值
					province:this.province,
					region:this.region,
					tag:'' //传空值
				};
				addAddressInfo(obj).then(res=>{
					console.log(res);
					if(res.success==true){
						
						uni.showToast({
						    title: '保存成功',
						    icon: 'success',
							duration:1000,
							success() {
								setTimeout(function(){
									uni.navigateBack({
										delta: 1
									})
								},1000)
							}
						});
						
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 保存地址按钮
	.save {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		 .btn {
			 display: flex;
			 box-shadow: 0px 4rpx 10rpx rgba(0,0,0,.4);
			 width: 70%;
			 height: 80rpx;
			 border-radius: 80rpx;
			 background-color: #354e44;
			 color: #fff;
			 justify-content: center;
			 align-items: center;
			 font-size: 30rpx;
		 }
	}
	// 内容
	.content {
		
		 .row {
			 display: flex;
			 flex-wrap: wrap;
			 width: 94%;
			 margin: 0 3%;
			 border-bottom: 1Px solid #ccc;
			  .nominal {
				  display: flex;
				  width: 30%;
				  height: 120rpx;
				  font-weight: 200;
				  font-size: 30rpx;
				  align-items: center;
			  }
			  .ipt {
				  display: flex;
				  width: 70%;
				  padding: 20rpx 0;
				  align-items: center;
				  font-size: 30rpx;
			  }
			  .switch {
				  justify-content: flex-end;
			  }
		 }
	}
</style>
